<template>
    <div>
        <!-- header -->
        <el-card class="!border-none mt-4" shadow="never">
            <!-- 导航栏 -->
            <el-tabs v-model="queryParams.status" class="demo-tabs">

                <!-- 表格 -->
                <el-table
                    size="large"
                    :data="pager.lists"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="60" />
                    <el-table-column label="产品名称" prop="name" min-width="100" />
                    <el-table-column label="产品主图" min-width="80">
                        <template #default="{ row }">
                            <div class="flex items-center">
                                <div>
                                    <el-avatar
                                        :src="row.pic"
                                        style="height: 60px; min-width: 60px"
                                    />
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格" prop="price" min-width="80" />
                    <el-table-column label="跳转链接" prop="buy_url" min-width="320" />
                    <el-table-column label="操作" min-width="160" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link  @click="editRoom(row.id)">
                                编辑
                            </el-button>
                            
                            <el-button
                                type="danger"
                                link
                                @click="handleDelete(row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <!-- 分页 -->
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
		<editPopup @success="getLists" v-if="showedit" ref="editRef" />
    </div>
</template>

<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { goodsMzList,decGoodsMz } from '@/api/live'
import feedback from '@/utils/feedback'
import { getRoutePath } from '@/router'
import editPopup from './publish.vue'

const queryParams = reactive({
    code: '',
    name: '',
    category_id: [],
    status: 'all'
})

//分页处理
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: goodsMzList,
    params: queryParams
})
getLists()

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showedit = ref(false);

// 添加
const editRoom = async (id: number) => {
    showedit.value = true;
    await nextTick();
    editRef.value?.open()
	editRef.value?.setFormData(id);
};

//删除商品
const ids = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
    ids.value = val.map((item) => {
        return item.id
    })
}
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await decGoodsMz({goods_mz_id:id })
    getLists()
}

</script>

<style lang="scss" scope>
//TODO
.el-alert--warning.is-light {
    background-color: rgba(246, 248, 255, 1);
    color: rgba(64, 115, 250, 1);
}

.ls-input {
    width: 280px;
}
</style>
